<template>
	<view class="root">
		<view>
			<view class="groupTitle"><text>照护信息</text></view>
			<!-- <view class="actionTitle"><text>图片上传</text></view> -->
			<view class="actionGroupColumn">
				<view class="actionItemText">
					<text class="actionItemTextLeft">姓名</text>
					<text class="actionItemTextRight">{{form.zhsq.bisZhsqSnryXm}}</text>
				</view>
				<view class="actionItemText">
					<text class="actionItemTextLeft">身份证</text>
					<text class="actionItemTextRight">{{form.zhsq.bisZhsqSnrySfz}}</text>
				</view>
				<view class="actionItemText">
					<text class="actionItemTextLeft">地址</text>
					<text class="actionItemTextRight">{{form.zhsq.bisZhsqHldz}}</text>
				</view>
				<view class="actionItemText">
					<text class="actionItemTextLeft">申请时间</text>
					<text class="actionItemTextRight">{{form.zhsq.lrsj}}</text>
				</view>
			</view>
		</view>
	<view class="form">
		<view class="groupTitle"><text>签约信息</text></view>
		<uni-forms :rules="rules" ref="form" v-model="form">
			<uni-forms-item name="bisQyQysj" class="bisQyQysj" >
				<uni-datetime-picker type="date" :clear-icon="false" v-model="form.bisQyQysj" placeholder="请选择签约日期"/>
			</uni-forms-item>
		</uni-forms>
	</view>
	<view>
		<view class="groupTitle"><text>签约文件</text></view>
		<view class="actionTitle"><text>图片上传(最多上传9张图片)</text></view>
		<view class="actionGroup">
			<view class="actionItem" v-for="(item,index) in imgs.means" :key="item.id">
				<uni-icons class="deleteImg" type="clear" size="30" @click="deleteImg('means',index)"></uni-icons>
				<image style="width: 100%;height: 100%;" :src="item.url" @click="previewImage('means',index)"></image>
			</view>
			<view class="actionItem" v-if="imgs.means.length < 9">
				<uni-icons type="camera" size="100" @click="selectImg('means')"></uni-icons>
			</view>
		</view>
	</view>
		<view class="actionButtonGroup">
			<button class="actionButton" @click="save">签约</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { StorageUtil } from '@/storage/StorageUtil'
	import { localStoreService } from "@/service/LocalStoreService"
	import { signedService } from '@/service/SignedService'
	import { route,routeMixin } from "@/route/Route"
	
	export default {
		mixins: [routeMixin],
		data() {
			return {
				imgs: {
					means: []
				},
				form:{
					bisQyQysj: ""
				},
				rules: {
					bisQyQysj: {
						rules:[
							{
								required: true,
								errorMessage: '请选择签约日期',
							},
						],
						label:'签约日期'
					},
				}
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "签约"
			})
		},
		methods: {
			routeParameterEvent(data) {
				this.routeParameter = data
				this.form = data.form
			},
			selectImg(type) {
				
				const _this = this
				uni.chooseImage({
					count: 9, //默认9
					success: function(chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: process.env.VUE_APP_TICK_HTTP__BASE_PATH + '/api/minio/mp/uploadImage', 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								fjlb: type,
								ywid: _this.form.bisQyId
							},
							header:{
								Authorization: StorageUtil.getStorage(StorageUtil.TOKEN)
							},
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data)
								_this.imgs[type] = [..._this.imgs[type],res.data]
							}
						});
					}
				});
			},
			previewImage(type,index){
				let urls = []
				this.imgs[type].map((item,index)=>{
					urls = [...urls,item.url]
				})
				console.log(urls)
				// 预览图片
				uni.previewImage({
					current: index,
					loop: true,
					urls: urls,
				});
			},
			deleteImg(type,index){
				
				localStoreService.deleteFile([this.imgs[type][index].id],(res)=>{
					console.log(res)
					this.imgs[type].splice(index,1)
				})
			},
			save(){
				if(this.imgs.means.length === 0){
					uni.showToast({
						title: "请上传签约文件",
						duration: 2000,
						icon:'error'
					});
					return
				}
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认提交',
					success: function (res) {
						if (res.confirm) {
							console.log(_this.form)
							_this.$refs.form.validate().then(res=>{
								signedService.sign(_this.form,(res)=>{
									route.goBack()
								})
							}).catch(err =>{
								// console.log('表单错误信息：', err);
							})
							
						} else if (res.cancel) {
						}
					}
				});
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.root {
		display: flex;
		flex-direction: column;
	}

	.groupTitle {
		height: 80rpx;
		background-color: $uni-bg-color-grey;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
		font-size: 36rpx;
		font-weight: 700;
	}

	.actionTitle {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
		font-size: 28rpx;
	}
	.actionGroupColumn{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.actionItemText{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: -webkit-fill-available;
		padding: 20rpx 40rpx;
		border-bottom: 4rpx $uni-bg-color-grey solid;
	}
	.actionItemTextLeft{
		width: 180rpx;
	}
	.actionItemTextRight{
		width: 450rpx;
		text-align: end;
	}
	.actionGroup {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
	}

	.actionItem {
		width: 200rpx;
		height: 200rpx;
		margin: 10rpx;
		border: 4rpx $uni-bg-color-grey solid;
		position: relative;
	}
	.deleteImg{
		color: red !important;
		font-size: 60rpx !important;	
		position: absolute;
		z-index: 9;
		right: -30rpx;
		top: -30rpx;
	}
	.actionButtonGroup{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: -webkit-fill-available;
		margin: 30rpx;
	}
	.actionButton{
		width: 580rpx;
		// margin: 20rpx;
		background-color: $uni-primary;
		color: $uni-white;
	}
</style>
